// 折线图配置
export const chartOption = (series, xAxis, name, percentOfTen) => {
  return {
    tooltip: {
      trigger: "axis",
    },
    color: ["#00D1FF", "#73F6AF", "#FE8800"],
    grid: {
      left: "5%",
      right: "5%",
      bottom: "50",
      top: "30",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      name: "t",
      nameTextStyle: {
        color: "#BFCAD4",
        nameLocation: "start",
        fontSize: "14",
      },
      axisLine: {
        lineStyle: {
          color: "#314450",
          width: "2",
        },
      },
      axisLabel: {
        textStyle: {
          color: "#BFCAD4",
          fontSize: "14",
        },
      },
      axisTick: {
        show: false, // 不显示坐标轴刻度线
      },
      data: xAxis,
    },
    yAxis: {
      type: "value",
      name: name,
      nameTextStyle: {
        color: " #BFCAD4",
        nameLocation: "start",
        fontSize: "14",
      },
      // min: 0, //取0为最小刻度
      scale: true, //自适应
      nameGap: 15,
      axisTick: {
        show: false, //刻度线
      },
      axisLine: {
        show: false, //隐藏y轴
        lineStyle: {
          color: "#9a9ea1",
        },
      },
      axisLabel: {
        // show: false, //隐藏刻度值
        textStyle: {
          color: "#BFCAD4",
          fontSize: "14",
        },
      },
      splitLine: {
        // ⽹格线
        show: true,
        lineStyle: {
          color: "#2e3f48",
          type: "dotted",
          width: "2",
        },
      },
    },
    dataZoom: [
      // {
      //   type: "inside",
      //   // type: "slider",
      //   bottom: 0, //下滑块距离x轴底部的距离
      //   show: true,
      //   start: percentOfTen,
      //   end: 100,
      //   xAxisIndex: [0],
      // },
      {
        type: "inside",
        bottom: 0, //下滑块距离x轴底部的距离
        start: percentOfTen,
        end: 100,
        borderColor: "#4d4d57",
        dataBackground: {
          areaStyle: {
            color: " #8C949a",
            width: 1,
          },
          lineStyle: {
            color: "#fff",
            width: 2,
          },
        },
        filterMode: "empty",
      },
      {
        start: percentOfTen,
        bottom: 0, //下滑块距离x轴底部的距离
        end: 100,
        borderColor: "#4d4d57",
        dataBackground: {
          areaStyle: {
            color: " #8C949a",
            width: 1,
          },
          lineStyle: {
            color: "#fff",
            width: 2,
          },
        },
        filterMode: "empty",
      },
    ],
    // visualMap: {
    //   type: "piecewise",
    //   top: 50,
    //   right: 15,
    //   pieces: [
    //     { min: 40, max: 60, color: "purple" },
    //     { min: 0, max: 40, color: "#00D1FF" },
    //   ],
    // },
    series: series,
    // toolbox: toolbox,
  };
};

export const chartOptionmore = (series, toolbox) => {
  return {
    tooltip: {
      trigger: "axis",
    },
    color: ["#73F6AF", "#00D1FF", "#FE8800"],
    legend: {
      textStyle: {
        fontSize: 15,
        color: "#fff",
      },
      bottom: "15",
    },
    grid: {
      left: "2%",
      right: "2%",
      bottom: "50",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      axisLine: {
        lineStyle: {
          color: "#314450",
          width: "2",
        },
      },
      axisLabel: {
        textStyle: {
          color: "#BFCAD4",
          fontSize: "14",
        },
      },
      axisTick: {
        show: false, // 不显示坐标轴刻度线
      },
      data: [
        "11:00",
        "12:00",
        "13:00",
        "14:00",
        "15:00",
        "16:00",
        "17:00",
        "18:00",
      ],
    },
    yAxis: {
      type: "value",
      name: "温度/°C||枚举值",
      nameTextStyle: {
        color: " #BFCAD4",
        nameLocation: "start",
        fontSize: "14",
      },
      min: 0, //取0为最小刻度
      scale: true, //自适应
      nameGap: 15,
      axisTick: {
        show: false, //刻度线
      },
      axisLine: {
        show: false, //隐藏y轴
      },
      axisLabel: {
        // show: false, //隐藏刻度值
        textStyle: {
          color: "#BFCAD4",
          fontSize: "14",
        },
      },
      splitLine: {
        // ⽹格线
        show: true,
        lineStyle: {
          color: "#2e3f48",
          type: "dotted",
          width: "2",
        },
      },
    },
    series: series,
    toolbox: toolbox,
  };
};
